<template>
	<view>

		<template v-if="info.type!=3">
			<view v-if="info.user_status == 0" class="state">待付款</view>
			<view v-if="info.user_status == 1 && info.refund_order == 0" class="state">已付款</view>
			<view v-if="info.user_status == 2" class="state">已使用</view>
			<view v-if="info.user_status == 3" class="state">已过期</view>
			<view v-if="info.refund_order == 1" class="state">退款中</view>
			<view v-if="info.refund_order == 2" class="state">已退款</view>
			<view v-if="info.refund_order == 3" class="state">退款拒绝</view>
		</template>

		<view class="ek-card">
			<view>
				<view class="h1">{{ info.title }}</view>
				<view class="h3">{{ info.remark }}</view>
				<template v-if="info.type == 1">
					<view class="h3">{{ info.start_time|formatDate }}</view>
					<view v-for="(sub, index) in info.child" :key="index" class="h2 flex jcsb">
						<view>座位号：
							<text
								class="ek-color-red">{{sub.region_number}}区{{ sub.row_number }}排{{ sub.column_number }}号</text>
						</view>
						<view>￥{{ sub.price }}</view>
					</view>
				</template>
				<template v-else-if="info.type ==2">
					<view class="h3">开展时间：{{ info.open_date }} </view>
					<view v-for="(sub, index) in info.child" :key="index" class="h2 flex jcsb">
						<view>预约时段：
							<text class="ek-color-red">{{sub.show_date}} {{sub.time.start}}-{{sub.time.end}}</text>
						</view>
						<view>{{ sub.price }}</view>
					</view>
				</template>
				<template v-else>
					<view class="h3">开放时间：{{ info.open_date}} </view>
					<view v-for="(sub, index) in info.child" :key="index" class="h2 flex jcsb">
						<view>预约时段：
							<text class="ek-color-red">{{sub.show_date}} {{sub.time.start}}-{{sub.time.end}}</text>
						</view>
						<view>免费</view>
					</view>
				</template>
			</view>
		</view>
		<!--  -->
		<template v-if="(info.user_status == 1 || info.user_status == 2) && info.refund_order == 0 && info.type =='1'">
			<view class="ek-card" v-if="info.refund_order == 0">
				<view class="h1">演出券</view>
				<view clss="h2">{{ info.child.length }}张可用</view>
				<view v-for="(sub, index) in info.child" :key="index" class="desc flex jcsb aic">
					<view>劵码：{{ sub.sn_number }}</view>
					<!-- <image :src="sub.sn_url" class="qrcode" @click="previewCode(sub)"></image> -->
					<zb-code :size="80" :ref="'qrCodeYcq'+index" cid="qr-code-ycq" :val="sub.sn_number"></zb-code>
				</view>
			</view>
		</template>
		<template v-if="info.type == 1">
			<!-- 1表示普通订座位-->
			<view class="ek-card">
				<view class="h2">观众信息</view>
				<view class="h2 flex">
					<view class="flex-1">购票人</view>
					<view>{{ info.user_name }}</view>
				</view>
				<view class="h2 flex">
					<view class="flex-1">手机号</view>
					<view>{{ info.phone }}</view>
				</view>
				<view class="h2 flex" v-for="(sub, index) in info.child" :key="index">
					<view class="flex-1">身份证号码</view>
					<view>{{ sub.card_number }}</view>
				</view>
			</view>
		</template>
		<template v-else>
			<view class="ek-card">
				<view class="au-title">观众信息</view>
				<view class="au-item" v-for="(sub, index) in info.child" :key="index">
					<view class="h2 flex">
						<view class="flex-1">观众姓名</view>
						<view>{{sub.user_name}}</view>
					</view>
					<view class="h2 flex">
						<view class="flex-1">手机号</view>
						<view>{{sub.phone}}</view>
					</view>
					<view class="h2 flex">
						<view class="flex-1">身份证号码</view>
						<view>{{sub.card_number}}</view>
					</view>
				</view>
			</view>
		</template>


		<view class='wrapper'>
			<view class='item acea-row row-between'>
				<view>订单号</view>
				<view class='conter'>{{ info.order_sn }}</view>
			</view>
			<view class='item acea-row row-between'>
				<view>下单时间</view>
				<view class='conter'>{{ info.add_time|formatDate }}</view>
			</view>
			<view v-if="info.pay_time" class='item acea-row row-between'>
				<view>支付时间</view>
				<view class='conter'>{{ info.pay_time|formatDate }}</view>
			</view>
			<view class='item acea-row row-between'>
				<view>订单状态</view>
				<view v-if="info.user_status == 0" class="conter">待付款</view>
				<view v-if="info.user_status == 1" class="conter">已付款</view>
				<view v-if="info.user_status == 2" class="conter">已使用</view>
				<view v-if="info.user_status == 3" class="conter">已过期</view>
			</view>
			<view class='item acea-row row-between'>
				<view>订单金额</view>
				<view class='conter'>¥{{ pay_money }}</view>
			</view>
			<view v-if="info.refund_time" class='item acea-row row-between'>
				<view>申请退款时间</view>
				<view class='conter'>{{ info.refund_time|formatDate }}</view>
			</view>
		</view>
		<view style="height: 100px"></view>
		<template v-if="info.type != 3">

			<view v-if="info.user_status == 0" class="footer">
				<text class="font-color-red">￥{{ pay_money }}</text>
				<view class="btn" @click="goCancel">取消订单</view>
				<view class="btn" @click="goPay">立即支付</view>
			</view>
			<view v-if="info.user_status == 1 && info.refund_order == 0 && info.type =='1'" class="footer">
				<view class="flex-1"></view>
				<view class="btn" @click="goRefund">退款</view>
			</view>
		</template>
	</view>
</template>

<script>
	import productConSwiper from "@/components/productConSwiper/index.vue";
	import zbCode from '@/components/zb-code/zb-code.vue'
	import {
		HTTP_REQUEST_URL
	} from "@/config/app";
	import {
		activityRefundOrder,
		payActivity,
		performGetOrderDetail,
		performRefundOrder,
		performDelOrder,
		performPay
	} from "@/api/2_activity";


	export default {
		components: {
			productConSwiper,
			zbCode
		},
		data() {
			return {
				item: {},
				info: {
					child: []
				},
				imgUrls: [],
				domain: HTTP_REQUEST_URL,
				description: '',
				tagStyle: {
					img: "width:100%;display:block;",
				},
				refund_msg: [],
				day_time: '',
				sub_bill: '',
				order_sn: '',
				id: ''
			};
		},
		onLoad(options) {
			this.id = options.id
			this.day_time = options.day_time
			this.sub_bill = options.sub_bill
			this.order_sn = options.order_sn
			// this.item = JSON.parse(options.item)
			// this.refund_msg = JSON.parse(options.refund_msg)
			this.init()
		},
		computed: {
			pay_money() {
				return this.info.child.reduce((a, b) => {
					return +a + +b.price
				}, 0)
			}
		},
		methods: {
			delOrder() {
				performDelOrder(this.id).then(res => {
					if (res.status == 200) {
						this.$util.Tips({
							title: res.message,
							icon: 'success'
						})
						uni.$on('update')
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 200)
					} else {
						this.$util.Tips({
							title: res.message,
							icon: 'error'
						})
					}
					console.log(res);
				}).catch(er => {
					this.$util.Tips({
						title: er,
						icon: 'error'
					})
				})
			},
			cancelOrder() {
				performRefundOrder(this.id).then(res => {
					if (res.status == 200) {
						this.$util.Tips({
							title: res.message,
							icon: 'success'
						})
						uni.$on('update')
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 200)
					} else {
						this.$util.Tips({
							title: res.message,
							icon: 'error'
						})
					}
					console.log(res);
				}).catch(er => {
					this.$util.Tips({
						title: er,
						icon: 'error'
					})
				})
			},
			previewCode(item) {
				uni.previewImage({
					urls: [item.sn_url]
				})
			},
			init() {
				performGetOrderDetail(this.order_sn, this.id).then(res => {
					let {
						data
					} = res
					this.info = data
					this.$nextTick(() => {
						if (this.info.type != 1) {
							return;
						}
						this.info.child.map((item, index) => {
							console.log('====>', index);
							this.$refs['qrCodeYcq' + index][0]._makeCode()
						})

					})

				})
			},
			goCancel() {
				let _this = this
				uni.showModal({
					title: '取消',
					content: '确定要取消订单吗',
					success: function(res) {
						if (res.confirm) {
							_this.delOrder()
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			goRefund() {
				let _this = this
				uni.showModal({
					title: '退票',
					content: '确定要退票吗',
					success: function(res) {
						if (res.confirm) {
							_this.cancelOrder()
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});


				// uni.navigateTo({
				// 	url: `/pages/2_development/user/show_order_refund?order_sn=${this.info.order_sn}`
				// })
			},
			goPay() {
				let _this = this
				performPay({
					order_sn: this.info.order_sn,
					pay_type: 2
				}).then(res2 => {
					console.log(res2)
					let config = res2.data.result.config
					uni.requestPayment({
						timeStamp: config.timestamp,
						nonceStr: config.nonceStr,
						package: config.package,
						signType: config.signType,
						paySign: config.paySign,
						success: (res) => {
							this.$util.Tips({
								title: '支付成功',
								icon: 'success'
							});
							this.init()
						},
						fail: () => {
							return _this.$util.Tips({
								title: '支付失败'
							});
						},
						complete: (res) => {
							if (res.errMsg == 'requestPayment:cancel') return this.$util.Tips({
								title: '取消支付'
							});
						}
					})
				}).catch(er => {
					_this.$util.Tips({
						title: er
					});
				})
			},
			refundOrder() {
				activityRefundOrder(this.item.id, {
					refund_msg: this.refund_msg[e.detail.value]
				}).then(res => {
					this.$util.Tips({
						title: '提交成功',
						icon: 'success'
					});
					this.init()
				}).catch(err => {
					this.$util.Tips({
						title: err,
						icon: 'fail'
					});
				})
			}
		}
	};
</script>

<style lang="scss">
	@import "../../index/style/main.scss";
	@import "./style.scss";

	.wrapper {
		background-color: #fff;
		margin-top: 12rpx;
		padding: 30rpx;
	}

	.wrapper .item {
		font-size: 28rpx;
		color: #282828;
	}

	.wrapper .item~.item {
		margin-top: 20rpx;
	}

	.wrapper .item .conter {
		color: #868686;
		width: 460rpx;
		text-align: right;
	}

	.wrapper .item .conter .copy {
		font-size: 20rpx;
		color: #333;
		border-radius: 17rpx;
		border: 1rpx solid #666;
		padding: 3rpx 15rpx;
		margin-left: 24rpx;

	}

	.wrapper .actualPay {
		border-top: 1rpx solid #eee;
		margin-top: 30rpx;
		padding-top: 30rpx;
	}

	.wrapper .actualPay .money {
		font-weight: bold;
		font-size: 30rpx;
	}

	.footer {
		width: 100%;
		height: calc(50px + constant(safe-area-inset-bottom));
		height: calc(50px + env(safe-area-inset-bottom));
		background-color: #fff;
		padding: 0 30rpx;
		font-size: 28rpx;
		color: #333;
		box-sizing: border-box;
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-top: 8rpx;
		padding-bottom: calc(1px + constant(safe-area-inset-bottom));
		padding-bottom: calc(1px + env(safe-area-inset-bottom));

		.price {
			font-size: 28rpx;
			color: #fff;
		}

		.btn {
			font-size: 30rpx;
			color: #fff;
			width: 240rpx;
			height: 70rpx;
			background-color: #e93323;
			border-radius: 50rpx;
			text-align: center;
			line-height: 70rpx;
		}
	}

	.state {
		height: 100rpx;
		text-align: center;
		color: #fa6514;
		line-height: 100rpx;
		margin-bottom: 30rpx;
		background: #fff;
	}

	.bnt {
		margin: 30rpx;
	}

	.btns {
		text-align: center;
		line-height: 76rpx;
		color: #fff;
		font-size: 28rpx;
	}

	.joinCart {
		flex: 1;
		border-radius: 50rpx 0 0 50rpx;
		background-image: linear-gradient(to right, #fea10f 0%, #fa8013 100%);
	}

	.buy {
		flex: 1;

		border-radius: 0 50rpx 50rpx 0;
		background-image: linear-gradient(to right, #fa6514 0%, #e93323 100%);
	}

	.users {
		padding-left: 30rpx;
		flex-wrap: wrap;
		/* #ifdef MP */
		margin-top: 0;
		/* #endif */
		/* #ifdef H5 */
		margin-top: 0;

		/* #endif */
		.avatar {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 30%;
			margin-right: 3%;
			margin-top: 20rpx;

			height: 80rpx;
			width: 80rpx;
			border-radius: 40rpx;
			background: #eee;

			&.active {
				background: #999;
				color: #fff;
			}
		}
	}

	.attribute {
		background-color: #fff;
		padding: 0 30rpx;
		font-size: 26rpx;
		color: #82848f;
		height: 80rpx;
		position: relative;
	}

	.atterTxt {
		font-size: 28rpx;
		color: #282828;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		display: inline-block;
		// width: 400rpx;
		margin-left: 20rpx;
	}


	.info {
		position: relative;

		.name {
			margin: 20rpx 30rpx 0;
			font-size: 32rpx;
			font-weight: 700;
		}

		.score {
			height: 50rpx;
		}

		.desc {
			margin: 0 30rpx;
			font-size: 24rpx;
			color: #82848f;
			margin-top: 10rpx;
		}

		.shoucang {
			font-size: 18rpx;
			text-align: center;
			color: #666;
			position: absolute;
			top: 10rpx;
			right: 30rpx;
		}
	}

	.notice-title {
		font-size: 28rpx;
		color: #333;
		margin: 30rpx;
		font-weight: bold;
	}

	.content {
		margin: 20rpx 30rpx 0;
	}


	.qrcode {
		width: 40px;
		height: 40px;
	}

	.au-title {
		font-size: 28rpx;
		font-weight: bold;
	}

	.au-item {
		border-bottom: 1px dashed #F0F0F0;
		margin-top: 20rpx;
		padding: 20rpx 0rpx;
	}
</style>
